<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			#cannon{
				width: 74px;
				height: 85px;
				background: url(image/cannon5.png) ;
				position: absolute;
			   
			}
		</style>
	</head>

	<body>
		<div id="cannon"></div>

		<script>
			var ww = document.body.clientWidth;//元素可视宽度
			var wh = document.body.clientHeight;//元素可视高度
			
			cannon.style.bottom ="0px";//获得炮弹筒的Y轴位置
			cannon.style.left = ww/2 -74/2 +"px";//获得炮弹筒的X轴位置
			//调用参数函数
			document.onclick = function(e) {
				//获得点击时的坐标位置
				var x = e.pageX;
				var y = e.pageY;

				var x1 = parseInt(cannon.style.left);

				var a = x- x1;//距离原点的X轴位置
				var b = wh-y;//距离原点的Y轴位置
				//旋转角度，利用反三角函数计算出来乘以弧度；
				var deg1 = Math.atan(a/b)*180/Math.PI;
			
				cannon.style.transform = "rotate("+deg1+"deg)";
				
			}
		</script>
	</body>

</html>